<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.tab {
			width: 600px;
			margin: 0 auto;
		}
		button {
			width: 600px;
			height: 40px;
		}
		ul {
			display: flex;
			flex-flow: wrap;
		}
		li {
			list-style: none;
			box-sizing: border-box;
			width: 100px;
			height: 100px;
			border: 1px solid #000;
			line-height: 100px;
			text-align: center;
		}
		.select {
			background-color: red;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="tab">
		<button>开始</button>
		<ul>
			<li class="select"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<script type="text/javascript">
		let data = ["孙悟空", "唐僧", "猪八戒", "沙僧", "白龙马", "观音菩萨", 
                 "如来佛祖", "玉皇大帝", "太白金星", "牛魔王", "铁扇公主", 
                 "红孩儿", "二郎神", "哪吒", "托塔天王", "蜘蛛精", "白骨精", 
                 "金角大王", "银角大王"];

		let btn = document.querySelector("button");
		let ul = document.querySelector("ul");
		let lis = document.querySelectorAll("li");
		let time = null;

		// 初始化列表内容
		for (let i = 0; i < lis.length; i++) {
			lis[i].textContent = data[i];
		}

		btn.onclick = function() {
			if (btn.textContent === "开始") {
				// 开始抽奖
				btn.textContent = "结束";
				lis = document.querySelectorAll("li"); // 刷新列表
				
				if (lis.length === 0) {
					alert("没有更多选项了！");
					btn.textContent = "开始";
					return;
				}

				time = setInterval(() => {
					const num = Math.floor(Math.random() * lis.length);
					const current = document.querySelector(".select");
					
					if (current) current.classList.remove("select");
					lis[num].classList.add("select");
				}, 100);
			} else {
				// 停止抽奖
				btn.textContent = "开始";
				clearInterval(time);
				
				const selected = document.querySelector(".select");
				if (selected) {
					const index = Array.from(lis).indexOf(selected);
					if (index !== -1) {
						data.splice(index, 1);    // 更新数据源
						selected.remove();        // 移除DOM元素
						lis = document.querySelectorAll("li"); // 刷新列表
					}
				}
			}
		};
	</script>
</body>
</html>